@use "sass:color";

.exam-page {
  background-color: $bg-color;
  position: relative;
  overflow: hidden;
  display: flex;
  animation: fadeIn 0.6s var(--transition-timing);

  .center-box {
    max-width: 1520px;
    margin: 0 auto;
    width: 100%;
    min-height: 368px;
    background: #fff;
    border-radius: 16px;
    padding: 0 20px;
    padding-top: 30px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all var(--transition-duration) var(--transition-timing);

    &:hover {
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    }
  }

  .exam-selected-section {
    margin: 0 auto;
    margin-bottom: 20px;
    position: relative;
    padding-top: 50px;
    max-width: 1520px;
    width: 100%;

    .exam-option-group {
      width: fit-content;
      height: 50px;
      position: absolute;
      top: 0;
      left: 0;

      .exam-option {
        cursor: pointer;
        padding: 10px;
        border-bottom: 2px solid transparent;
        transition: all var(--transition-duration) var(--transition-timing);
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 18px;
        color: $text-primary;
        height: 50px;
        width: fit-content;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 0;
          height: 2px;
          background-color: $primary-color;
          transition: width var(--transition-duration) var(--transition-timing);
        }

        &:hover {
          color: $primary-color;
          transform: translateY(-2px);

          &::after {
            width: 100%;
          }
        }

        &.selected {
          color: $primary-color;
          border-bottom: 2px solid $primary-color;

          &::after {
            width: 100%;
          }
        }

        &:active {
          transform: scale(var(--active-scale));
        }
      }
    }

    .exam-list-title {
      height: 24px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: $text-primary;
      line-height: 25px;
      text-align: left;
      margin-bottom: 30px;
      display: block;
      animation: slideInDown 0.6s var(--transition-timing);
    }

    :deep(.exam-navigation) {
      width: 100%;
      height: auto;
      font-size: 16px;
      margin-bottom: 30px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      animation: slideInUp 0.6s var(--transition-timing);

      .el-form-item {
        margin-right: 20px;
        margin-bottom: 10px;
      }

      .el-form-item__label {
        background: #fff;
        font-weight: 500;
      }

      .exam-navigation-box {
        background-color: transparent;
        border-radius: $border-radius-base;
        padding: 5px 10px;
        height: auto;
        font-weight: 500;
        transition: all var(--transition-duration) var(--transition-timing);

        &:hover {
          background-color: rgba(232, 233, 234, 1);
          transform: translateY(-2px);
        }
      }

      .el-button {
        position: relative;
        overflow: hidden;
        transition: all var(--transition-duration) var(--transition-timing);
        border-radius: $border-radius-base;
        padding: 10px 20px;
        z-index: 1;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
          transform: translateX(-100%);
          transition: transform 0.6s var(--transition-timing);
          z-index: -1;
        }

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

          &::before {
            transform: translateX(100%);
          }
        }

        &:active {
          transform: scale(var(--active-scale));
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        // 搜索按钮特殊样式
        &[type="primary"] {
          background: var(--el-color-primary);
          border-color: var(--el-color-primary);
          color: #fff;

          &:hover {
            background: #1890ff;
            border-color: #1890ff;
          }

          &:active {
            background: #096dd9 !important;
            border-color: #096dd9 !important;
          }
        }

        // 重置按钮特殊样式
        &[type="info"] {
          &:hover {
            background: rgba(144, 147, 153, 0.1);
            border-color: #909399;
            color: #606266;
          }

          &:active {
            background: rgba(144, 147, 153, 0.2) !important;
            border-color: #606266 !important;
            color: #303133 !important;
          }
        }
      }
    }

    .exam-list-group {
      flex-wrap: wrap;
      animation: fadeIn 0.8s var(--transition-timing);

      @media screen and (min-width: 1420px) {
        .exam-list-item {
          width: 32%;
          &:nth-of-type(3n) {
            margin-right: 0;
          }
        }
      }

      @media screen and (max-width: 1419px) {
        .exam-list-item {
          width: 48%;
          margin-right: 2%;
          &:nth-of-type(2n) {
            margin-right: 0;
          }
        }
      }

      @media screen and (max-width: 970px) {
        .exam-list-item {
          width: 100%;
          margin-right: 0;
        }
      }

      .exam-list-item {
        height: auto;
        min-height: 220px;
        background: $card-bg;
        border-radius: $border-radius-card;
        margin-right: 2%;
        margin-bottom: 25px;
        padding: 24px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        cursor: pointer;
        transition: all var(--transition-duration) var(--transition-timing);
        box-shadow: $box-shadow-base;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
          transform: translateX(-100%);
          transition: transform 0.6s var(--transition-timing);
        }

        .right-info {
          width: calc(100% - 146px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
        }

        .exam-title {
          height: auto;
          min-height: 26px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 20px;
          color: $text-primary;
          line-height: 1.4;
          text-align: left;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 18px;
          display: block;
          transition: color var(--transition-duration) var(--transition-timing);
        }

        .exam-content {
          margin-bottom: 26px;
          span {
            height: auto;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: $text-secondary;
            line-height: 1.5;
            display: block;
            margin-bottom: 12px;
            transition: color var(--transition-duration) var(--transition-timing);
          }
        }

        img {
          width: 126px;
          height: 180px;
          border-radius: $border-radius-base;
          object-fit: cover;
          transition: transform var(--transition-duration) var(--transition-timing);
        }

        &:hover {
          background: #fff;
          box-shadow: $box-shadow-hover;
          transform: translateY(-3px);

          &::before {
            transform: translateX(100%);
          }

          .exam-title {
            color: $primary-color;
          }

          img {
            transform: scale(1.03);
          }

          .exam-content span {
            color: $text-primary;
          }
        }

        &:active {
          transform: scale(var(--active-scale)) translateY(2px);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .exam-hash-entry {
          float: right;
          font-size: 18px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: $text-light;
          padding: 5px 10px;
          border-radius: 4px;
          background-color: #f0f0f0;
          transition: all var(--transition-duration) var(--transition-timing);
        }

        .exam-button-container {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 10px;

          .el-button {
            width: 120px;
            height: 44px;
            background: $bg-color;
            border-radius: 6px;
            border: 1px solid $primary-color;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 18px;
            color: $primary-color;
            line-height: 44px;
            text-align: center;
            transition: all var(--transition-duration) var(--transition-timing);

            &:hover {
              background: color.adjust($primary-color, $lightness: 40%);
              color: color.adjust($primary-color, $lightness: -10%);
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(50, 197, 255, 0.2);
            }

            &:active {
              transform: scale(var(--active-scale));
              background: color.adjust($primary-color, $lightness: 35%) !important;
            }
          }
        }
      }
    }

    .exam-page-pagination {
      width: 100%;
      height: auto;
      margin: 30px 0 73px 0;
      display: flex;
      justify-content: center;
      animation: slideInUp 0.6s var(--transition-timing);

      :deep(.el-pagination) {
        padding: 10px;
        background-color: $card-bg;
        border-radius: $border-radius-base;
        box-shadow: $box-shadow-base;
        transition: all var(--transition-duration) var(--transition-timing);

        &:hover {
          box-shadow: $box-shadow-hover;
        }

        .el-pagination__sizes,
        .el-pagination__jump {
          margin-left: 16px;
        }

        button:not(:disabled) {
          transition: all var(--transition-duration) var(--transition-timing);

          &:hover {
            color: $primary-color;
            transform: translateY(-2px);
          }

          &:active {
            transform: scale(var(--active-scale));
          }
        }

        .el-pager li {
          transition: all var(--transition-duration) var(--transition-timing);

          &:not(.disabled).active {
            background-color: $primary-color;
            color: #fff;
            transform: scale(1.1);
          }

          &:not(.disabled):hover {
            color: $primary-color;
            transform: translateY(-2px);
          }

          &:not(.disabled):active {
            transform: scale(var(--active-scale));
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.range_page {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  animation: slideInUp 0.6s var(--transition-timing);

  :deep(.el-pagination) {
    padding: 10px;
    background-color: $card-bg;
    border-radius: $border-radius-base;
    box-shadow: $box-shadow-base;
    transition: all var(--transition-duration) var(--transition-timing);

    &:hover {
      box-shadow: $box-shadow-hover;
    }
  }
}

:deep(.oj-login-dialog-centor) {
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    transition: all var(--transition-duration) var(--transition-timing);

    .el-dialog__title {
      font-weight: 600;
      color: $text-primary;
    }
  }

  .el-dialog__body {
    padding: 24px;
  }

  .el-table {
    border-radius: $border-radius-base;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: $box-shadow-base;
    transition: all var(--transition-duration) var(--transition-timing);

    &:hover {
      box-shadow: $box-shadow-hover;
    }

    th.el-table__cell {
      background-color: #f5f7fa;
      font-weight: 600;
      color: $text-secondary;
      transition: all var(--transition-duration) var(--transition-timing);
    }

    .el-table__row {
      transition: all var(--transition-duration) var(--transition-timing);

      &:hover > td.el-table__cell {
        background-color: color.adjust($primary-color, $lightness: 45%);
        transform: translateY(-1px);
      }
    }

    .el-table__row:hover {
      background: #f5f7fa !important;
    }
  }
} 